<template>
  <el-form-item label="选项：">
    <div class="formItem" v-for="(item,i) in options" :key="i">
      <el-checkbox-group v-model="item.isRight" style="width: 35%;"><br>
        <el-row :gutter="20">
          <el-col :span="3" class="top">
            <el-checkbox :label="label[i]" style="width: 60%;" :checked='item.isRight'>
              {{ label[i] }}：
            </el-checkbox>
          </el-col>
          <el-col :span="14">
            <el-input v-model="item.title" class="inputTop"></el-input>
          </el-col>
        <el-col :span="5" class="avatar">
          <el-upload
            style="width: 100%;"
            class="avatar-uploader"
            :on-success="handlePreview"
            @click.native="indexImg(label[i])"
            action="http://192.168.69.36:3000/upload">
            <img v-if="item.img" :src="item.img" class="avatar">
            <span class="avatar-uploader-icon">
              <i class="el-icon-circle-close"></i>
              上传图片</span>
          </el-upload>
        </el-col>
        </el-row>
      </el-checkbox-group>
    </div>
    <el-form-item>
      <el-button type="danger" size="small" @click="add">+增加选项与答案</el-button>
    </el-form-item>
  </el-form-item>
</template>

<script>
export default {
  name: 'checkbox',
  props: {
    Checkbox: {
      type: Array
    },
    clickGet: {
      type: Function
    }
  },
  data () {
    return {
      options: [
        { code: 'A', title: '', img: '', isRight: false },
        { code: 'B', title: '', img: '', isRight: false },
        { code: 'C', title: '', img: '', isRight: false },
        { code: 'D', title: '', img: '', isRight: false }
      ],
      dialogVisible: false,
      label: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      id: '',
      isRight: ''
    }
  },
  watch: {
    // 获取修改的数据
    Checkbox: {
      deep: true,
      handler (newVal, oldVal) {
        this.options = newVal
        this.num(newVal)
      }
    }
  },
  methods: {
    add () {
      if (this.options.length === this.label.length) return this.$message.error('够了')
      this.options.push({ code: this.label[this.options.length], title: '', img: '', isRight: '' })
    },
    handlePreview (file) {
      const index = this.options.findIndex(item => item.code === this.id)
      this.options[index || 0].img = 'http://192.168.69.36:3000/' + file.url
    },
    indexImg (id) {
      this.id = id
    },
    num (newVal) {
      const arr = newVal.forEach(item => {
        item.isRight = !!item.isRight
      })
      this.isRight = arr
    }
  },
  created () {
    this.clickGet()
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    width: 200px;
    overflow: hidden;
    text-align: center;
    height: 60px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 15px;
    color: #000;
    line-height: 60px;
  }
  .avatar {
    position: relative;
  }
  .el-icon-circle-close {
    position: absolute;
    right: 0px;
    top: -5px;
    font-size: 17px;
  }
  .formItem {
    margin-bottom: 40px;
  }
    .top {
    margin-top: 15px;
  }
  .inputTop {
    margin-top: 12px;
  }
  .el-col-5 {
    width: 100px;
  }
</style>
